<template>
  <!-- 绑定自定义指令theme -->
  <div v-theme:column="'wide'" class="list">
    <el-input
      placeholder="请输入内容"
      prefix-icon="el-icon-search"
      v-model="search">
    </el-input>
    <dl v-for="item in filteredBlogs"><!--搜索的时候就不能遍历listData-->
      <!-- 绑定自定义指令rainbow -->
      <dt v-rainbow>{{item.name}} <span>{{item.author}}<!-- | to-uppercase过滤器--></span></dt>
      <dd>时间：{{item.date1}}-{{item.date2}}</dd>
      <dd>标签：
        <span v-for="tag in item.tag">{{tag}} </span>
      </dd>
      <dd>{{item.desc | lenth}}
        <router-link :to="'/detail/'+item.id">[...详情]</router-link>
      </dd>
    </dl>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "list",
    data() {
      return {
        listData: [],
        search: ''
      }
    },
    created() {
      // 请求列表数据
      /*fetch('https://wd7995297966yjuctj.wilddogio.com/blogs.json')
        .then(data => {
          return data.json()
        })
        .then(data => {
          let blogArr = [];
          for (let key in data) {
            data[key].id = key;
            blogArr.push(data[key]);
          }
          this.listData = blogArr;
          this.loading = false
        })*/
      axios.get('https://wd7995297966yjuctj.wilddogio.com/blogs.json')
        .then(res => {
          let blogArr = [];
          let data = res.data;
          for (let key in data) {
            data[key].id = key;
            blogArr.push(data[key]);
          }
          console.log(blogArr)
          this.listData = blogArr;
        })
    },
    computed: {
      // 搜索
      filteredBlogs() {
        return this.listData.filter((blog) => {
            return blog.name.match(this.search);
        })
      }
    },
    // 局部过滤器
    filters:{
      lenth(value){
        return  value.slice(0,100)
      }
    }
  }
</script>

<style scoped>
  .list {
    max-width: 960px;
    margin: 0 auto;
    padding-top: 40px;
  }

  .list dl {
    margin-bottom: 30px;
  }

  .list dl dt {
    line-height: 30px;
    cursor: pointer;
  }

  .list dl dt span {
    font-size: 14px;
    color: #666;
  }

  .list dl dd {
    font-size: 14px;
    color: #666;
    line-height: 22px;
  }
</style>
